import React, { useCallback, useState, useEffect } from "react"
import { Collapse, Table, Button, Popconfirm, message } from "antd"
import request from "../../utils/request"
function List(props) {
    const { Panel } = Collapse;
    const [data, changdata] = useState([])
    const [list, changlist] = useState([])



    const getdata = useCallback(async (data) => {
        const list = data.substring(0, 2)
        const res = await request.post('Ridgepoleid/classifyall', { dorm: list })
        const { data: { ret } } = res
        const student = await request.get('/student/selectall')
        const { data: { ret: { data: rex } } } = student
        console.log("student", rex);
        changlist(rex)
        changdata(ret.data);

    }, [])
    useEffect(() => {
        getdata(props.data)
    }, [props.data]);
    const remove = useCallback(async (id) => {
        const res = await request.put("/student/updata", { data: { userid: id, dormitory: "" } });
        if (res.data.code == 200) {
            message.success('该学生已被移除该宿舍');
            getdata(props.data)

        }
    },
        []
    )

    const columns = [
        {
            // 设置表头
            title: '学号',
            // 设置当前列显示什么数据
            dataIndex: 'userid',
            key: '_id',
            editable: true
        },
        {
            // 设置表头
            title: '姓名',
            dataIndex: 'username',
            key: '_id',
            editable: true,
        },
        {
            // 设置表头
            title: '性别',
            // 设置当前列显示什么数据
            dataIndex: 'sex',
            key: '_id',
        },
        {
            // 设置表头
            title: '联系电话',
            // 设置当前列显示什么数据
            dataIndex: 'phone',
            key: '_id',
        },
        {
            // 设置表头
            title: '所属班级',
            // 设置当前列显示什么数据
            dataIndex: 'garde',
            key: '_id',

        },

        {
            // 设置表头
            title: '操作',
            // 设置当前列显示什么数据
            key: '_id',
            render: (row) => {
                return (
                    <>
                        <Popconfirm title="确认移除" onConfirm={() => {
                            remove(row.userid);
                            console.log(row.userid);
                        }}>
                            <Button size="small" danger>移除</Button>

                        </Popconfirm>
                    </>
                )
            }
        },


    ];
    const datalist = data.map((item) => {
        const shuju = list.filter((itm) => {

            if (itm.dormitory == item.dorm) {

                return itm
            }
        })
        // shuju.replace(";", '')
        return (
            <Panel header={item.dorm} key={item._id} >
                <Table dataSource={shuju} columns={columns} pagination={false} rowKey="_id" />
            </Panel >
        )
    })

    return (
        <>
            <Collapse accordion style={{ height: "30rem", overflow: "auto" }}>
                {datalist}

            </Collapse>
        </>
    )
}
export default List